<template>
    <div>
        <p class="timers" :isShow = isShow>{{minute}}:{{second}}</p>
    </div>
</template>

<script>
    export default {
        props: ['isShow'],
        data() {
            return {
                 minutes: 5, //5
                 seconds: 0
            }
        },
       
        mounted () {
            if(this.isShow){
                this.count()
            }
        },
        created(){
             if(this.isShow){
                 this.count()
             }
        },
        methods:{
            num: function (n) {
                return n < 10 ? '0' + n : '' + n
            },
            count:function(){
                var _this = this
                var time = window.setInterval(function () {
                    if (_this.seconds === 0 && _this.minutes !== 0) {
                        _this.seconds = 59
                        _this.minutes -= 1
                    }else if (_this.minutes === 0 && _this.seconds === 0) {
                        _this.seconds = 0
                        window.clearInterval(time)
                        _this.$emit('closed',true)
                    }else {
                        _this.seconds -= 1
                    }
                },1000)
            }
        },
        watch: {
            second: {
                handler (newVal) {
                    this.num(newVal)
                }
            },
            minute: {
                handler (newVal) {
                    this.num(newVal)
                }
            },
            isShow(val){
                if(val){
                    this.count()
                }
			
            }
        },
        computed: {
            second: function () {
                return this.num(this.seconds)
            },
            minute: function () {
                return this.num(this.minutes)
            }
        }
    }
</script>

<style lang="scss" scoped>
.timers{
    font-size: 20px;
    margin-bottom: 8px;
}
</style>